<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.组件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue中使用组件的三大步骤：
						第一步：定义组件（创建组件）
						第二步：注册组件
						第三步：使用组件（编写组件标签）

				第一步：如何定义组件（创建组件）？ —— 使用Vue.extend(options)方法
						使用Vue.extend(options)，其中的options和new Vue(options)中的options几乎一样，但也有点小区别：
								1.组件配置中不能写：el配置，为什么？—— 由vm去决定服务哪个容器，组件跟着走就ok了;
								2.组件配置中的data，必须写成函数，为什么？—— 避免组件复用时产生数据的干扰;

				第二步：如何注册组件？
							new Vue({...})时，使用components配置项

				第三步：如何使用组件？—— 编写组件标签即可，例如：<Person></Person>

		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<Person></Person>
			<hr>
			<School></School>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			//创建Person组件（第一步）
			const Person = Vue.extend({
				template:`
					<div>
						<h1>人员信息</h1>
						<h4>人的姓名：{{personName}}</h4>
						<h4>人的年龄：{{age}}</h4>
						<button @click="showPersonInfo">点我提示个人信息</button>	
					</div>
				`,
				data(){
					return {
						personName:'李强',
						age:80,
					}
				},
				methods:{
					showPersonInfo(){
						alert(`我叫${this.personName}，我今年芳龄：${this.age}`)
					}
				}
			})
			
			//创建School组件（第一步）
			const School = Vue.extend({
				template:`
					<div>
						<h1>学校信息</h1>
						<h4>学校名称：{{schoolName}}</h4>
						<h4>学校地址：{{address}}</h4>
						<button @click="showSchoolInfo">点我提示学校信息</button>
					</div>
				`,
				data(){
					return {
						schoolName:'尚硅谷',
						address:'宏福科技园'
					}
				},
				methods:{
					showSchoolInfo(){
						alert(`学校是${this.schoolName}，坐落于${this.address}`)
					}
				}
			})

			new Vue({
				el:'#demo',
				//注册组件（第二步）
				components:{Person,School}
			})
		</script>
	</body>
</html>